<template>
    <div class="task-list" v-loading="loading">
        <el-select v-model="taskType" style="width:120px;">
            <el-option
                v-for="item in taskTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
        <el-select v-model="task" style="width:120px;margin-left:10px;">
            <el-option
                v-for="item in taskList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
        <el-button type="success" style="margin-left:10px;" @click="goDetail(0)">新建</el-button>
        <div class="table-box">
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    fixed
                    prop="channelid"
                    label="id">
                </el-table-column>
                <el-table-column
                    prop="label"
                    label="任务类型">
                </el-table-column>
                <el-table-column
                    prop="label"
                    label="所属任务">
                </el-table-column>
                <el-table-column
                    prop="label"
                    label="任务标题（C端展示）">
                </el-table-column>
                <el-table-column
                    prop="label"
                    label="任务描述">
                </el-table-column>
                <el-table-column
                    prop="label"
                    label="跳转位置">
                </el-table-column>
                <el-table-column
                    prop="label"
                    label="奖励规则">
                </el-table-column>
                <el-table-column
                    prop="label"
                    label="奖励合计">
                </el-table-column>
                <el-table-column
                    prop="label"
                    label="时间">
                </el-table-column>
                <el-table-column
                    prop="label"
                    label="状态">
                </el-table-column>
                <el-table-column
                    prop="address"
                    fixed="right"
                    label="操作">
                    <template slot-scope="scope">
                        <div><el-button @click="changeTaskStatus(scope.row)" type="text" size="small">上架</el-button></div>
                        <div><el-button @click="changeTaskStatus(scope.row)" type="text" size="small">下架</el-button></div>
                        <div><el-button @click="goDetail(scope.row)" type="text" size="small">查看详情</el-button></div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
            taskType: 0, // 任务类型
            taskTypeList: [ // 任务类型列表
                { value: 0, label: '全部任务' },
                { value: 1, label: '新手任务' },
                { value: 2, label: '每日任务' },
                { value: 3, label: '永久任务' },
                { value: 4, label: '限时任务' }
            ],
            task: 0, // 所属任务
            taskList: [
                { value: 0, label: '全部任务' },
                { value: 1, label: '新手任务' },
                { value: 2, label: '每日任务' },
                { value: 3, label: '永久任务' },
                { value: 4, label: '限时任务' }
            ], // 所属任务列表
            data: [], // 数据列表
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0
        }
    },
    created () {
        this.getDataList()
    },

    methods: {
        // 查看列表
        async getDataList () {
            if (this.loading) return
            this.pageNum = 1
            this.loading = true
            let params = {}
            let res = await this.$http.post('/home/findChannels', params)
            if (res.code === '0') {
                this.data = res.data
                this.total = res.data.length
            } else {
                this.$message({
                    message: res.desc,
                    type: 'error'
                })
            }
            this.loading = false
        },

        // 页容切换
        sizeChange (size) {
            this.pageSize = size
            this.pageNum = 1
        },

        // 页码切换
        pageChange (num) {
            this.pageNum = num
        },

        // 查看详情
        goDetail () {
            let id = 3
            if (id) {
                this.$router.push({
                    path: '/task/taskDetail',
                    query: {
                        id
                    }
                })
            } else {
                this.$router.push('/task/taskDetail')
            }
        },

        // 切换状态
        changeTaskStatus (item) {
        }
    },

    computed: {
        tableData () {
            let start = this.pageNum * this.pageSize - this.pageSize
            let end = this.pageNum * this.pageSize
            return this.data.slice(start, end)
        }
    }
}
</script>

<style lang="scss" scoped>
    .task-list {
        .table-box {
            margin: 20px 0;
        }
        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
